<template>
  <div class="about">
    <h1>counter.count：{{counter.count}}</h1>
    <h1>counter.doubleCount：{{counter.doubleCount}}</h1>
    <h1>counter.a：{{counter.a}}</h1>
    <h1>count：{{count}}</h1>
    <button @click="changeCount">count++</button>
  </div>
</template>
<script setup lang="ts">

import { useCounterStore } from "@/stores/counter"

// 获取仓库实例。
const counter = useCounterStore();
let count = counter.count;//只能获取初始值，无法实现双向-响应式。

const changeCount = () => {
  // pinia不需要使用mutaitions修改仓库的state，pinia可以直接修改状态，dev tools 可以直接捕获到状态改变。
  // 3种方法 改变count的值

  // 1 直接修改state
  // count = count + 1;
  // counter.count++;//通过store访问状态，直接读取和修改状态。

  // 2 通过store上的实例方法去修改状态
  // counter.increment();

  // 3 通过$patch方法修改state，一次性修改多个state值
  counter.$patch({
    count: counter.count + 1,
    a: counter.a + 2,
  })

}

</script>

<style scoped>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
